<template>
	<view>
		<view class="rechargeBox">
			<view class="rechargeTittle">
				提现金额
			</view>
			<view class="rechargeValue">
				<image class="balanceIcon" src="../../../../static/my/myBack/rmb.png" mode=""></image>
				<view class="rechargeInput">
					<input type="number" v-model="balance" placeholder="请输入提现金额" />
				</view>
				<image @click="clearBlance" class="clearBlance" src="../../../../static/my/myBack/clear.png" mode="">
				</image>
			</view>
		</view>
		<view class="chargeMethod">
			请选择提现方式
		</view>
		<!-- <view class="payBox">
			<image class="icon" src="../../../../static/my/myBack/wechat.png" mode=""></image>
			<view class="explainBox">
				<view class="explainTittle">
					微信支付
				</view>
				<view class="slogan">
					通过微信立即支付，方便快捷
				</view>
			</view>
			<view class="iconBox" @click="choosePayMethod(0)">
				<image v-if="payMethod == 1" class="chooseIcon" src="../../../../static/my/myBack/gou1.png" mode=""></image>
				<image v-else class="chooseIcon" src="../../../../static/my/myBack/gou0.png" mode=""></image>
			</view>
		</view> -->
		<view class="payBox">
			<image class="icon" src="../../../../static/my/myBack/alipay.png" mode=""></image>
			<view class="explainBox">
				<view class="explainTittle">
					提现到支付宝
				</view>
				<view class="slogan">
					推荐有支付宝账号的用户使用
				</view>
			</view>
			<view class="iconBox" @click="choosePayMethod(1)">
				<image v-if="payMethod == 0" class="chooseIcon" :src="$img('/static/my/myBack/gou1.png')" mode="">
				</image>
				<image v-else class="chooseIcon" :src="$img('/static/2021-08-30/10095dbf771762d576cc6ade568c6e0.png')"
					mode=""></image>
			</view>
		</view>

		<view class="withdrawalBox" v-if="payMethod==1">
			<view class="withdrawal-item">
				<text>支付宝账户名称</text>
				<input class="tx-ipt" type="text" v-model="aliCount" placeholder="请输入支付宝账户名称" />
			</view>
			<view class="withdrawal-item">
				<text>真实姓名</text>
				<input class="tx-ipt" type="text" v-model="aliName" placeholder="请输入支付宝真实姓名" />
			</view>
			<view class="withdrawal-item row-item">
				<view class="row">
					<text>温馨提示</text>
					<image src="/static/newimg/icon_04.png" mode="widthFix" class="icon-war"></image>
				</view>
				<view class="row">
					<text class="txts">请确保支付宝账号名称填写正确，不然会出现提现错误.</text>
				</view>
			</view>
		</view>
		<!-- <view @click="getMethod" class="chargeButton">
			确认提现
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0,
				payMethod: 1,
				aliCount: '',
				aliName: '',
				isUrl: false, //防止重复点击提交
			}
		},
		onNavigationBarButtonTap() {
			if (this.isUrl) {
				return
			}
			this.getMethod();
		},
		methods: {
			choosePayMethod(data) {
				this.payMethod = data
			},
			clearBlance() {
				this.balance = ''
			},
			getMethod() {
				if (this.balance <= 0) {
					uni.showToast({
						icon: "none",
						title: "请输入提现金额"
					})
					return false
				} else if (!this.aliCount && this.payMethod == 1) {
					uni.showToast({
						icon: "none",
						title: "请输入支付宝账户名称"
					})
					return false
				} else if (!this.aliName && this.payMethod == 1) {
					uni.showToast({
						icon: "none",
						title: "请输入支付宝真实姓名"
					})
					return false
				} else {
					this.isCharge()
				}
			},
			isCharge() {
				let data = {
					price: this.balance,
					alipay_name: this.aliName,
					alipay_account: this.aliCount,
					way: 2
				}
				if (this.payMethod == 0) {
					// 微信支付
					data = {
						price: this.balance,
						way: 1
					}

				} else {
					// 支付宝支付
					data = {
						price: this.balance,
						alipay_name: this.aliName,
						alipay_account: this.aliCount,
						way: 2
					}
				}
				this.isUrl = true;
				this.$utils.postrequest('/api/user/withdrawal_add', data, res => {
					if (res.code == 200) {
						this.balance = '';
						this.aliName = '';
						this.aliCount = '';
						uni.showToast({
							icon: 'none',
							title: res.message
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.isUrl = false;
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		/* padding: 0rpx 30rpx 0rpx 30rpx; */
	}

	input {
		font-size: 71rpx;
		width: 600rpx;
	}

	.withdrawal-item+.withdrawal-item {
		border-top: 1px solid #F9F9F9;
	}

	.withdrawal-item {
		/* width: 80%rpx; */
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #333333;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.withdrawal-item.row-item {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.withdrawal-item .row {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #FE4210;
	}

	.row .icon-war {
		width: 26rpx;
		margin-left: 12rpx;
	}

	.row .txts {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #333333;
		margin-top: 30rpx;
	}

	.withdrawal-item input.tx-ipt {
		width: 50%;
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #8B8B8B;
		margin: 0;
		text-align: right;
		/* font-size: 24rpx; */
	}

	/* .withdrawalBox {
		width: 700rpx;
		margin: 0 auto;
		height: 100rpx;
		border-bottom: #F6F5F5 1px solid;
	} */

	.withdrawalBox input {
		font-size: 24rpx;
		height: 30rpx;
		margin-top: 30rpx;
	}

	.chooseIcon {
		height: 36rpx;
		width: 36rpx;
	}

	// .uni-input-input {
	// 	font-size: 71rpx !important;
	// }

	.rechargeBox {
		margin-top: 67rpx;
		padding: 0rpx 30rpx 0rpx 30rpx;
	}

	.rechargeValue {
		height: 100rpx;
		position: relative;
		margin-top: 54rpx;
		display: flex;
		flex-direction: row;
	}

	.rechargeInput {
		margin-left: 47rpx;
		height: 53rpx;
		width: 300rpx;
		font-size: 71rpx;
		font-family: PingFang SC;
		color: #333333;

		.input-placeholder {
			font-size: 40rpx;
		}
	}

	.chargeMethod {
		height: 60rpx;
		width: 750rpx;
		background: #F6F5F5;
		display: flex;
		align-items: center;
		padding: 0rpx 30rpx 0rpx 30rpx;
		font-size: 26rpx;
	}

	.payBox {
		position: relative;
		height: 138rpx;
		display: flex;
		flex-direction: row;
		border-bottom: #F6F5F5 1px solid;
		width: 750rpx;
	}

	.icon {
		padding: 30rpx 16rpx 0rpx 30rpx;
		height: 78rpx;
		width: 76rpx;
	}

	.explainBox {
		/* margin-top: 35rpx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.explainTittle {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.slogan {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #949492;
	}

	.balanceIcon {
		height: 33rpx;
		width: 27rpx;
		position: absolute;
		bottom: 33rpx;
	}

	.clearBlance {
		height: 22rpx;
		width: 22rpx;
		position: absolute;
		right: 36rpx;
		bottom: 30rpx;
	}

	.chargeButton {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		width: 680rpx;
		height: 101rpx;
		background: linear-gradient(0deg, #694CFF, #755AFF);
		border-radius: 50rpx;
		font-size: 38rpx;
		color: #FFFFFF;
		margin-top: 210rpx;
	}

	.iconBox {
		position: absolute;
		right: 30rpx;
		top: 52rpx;
	}
</style>
